<template>
  <!-- 未开启OCR识别功能时，不显示按钮 -->
  <view class="ocr-button" @click="identify(fileId)" v-if="userInfoStore.epOcrSwitch">
    <view v-if="ocrLoading" class="ocr-loading"></view>
    <text>图片识别</text>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { userStore } from '@/stores'

  // 读取商户配置
  const userInfoStore = userStore()
  userInfoStore.setEpDetail(false)

  // 图片识别接口
  import { IdCardFrontOCR, IdCardBackOCR, driverCardFrontOCR, driverCardBackOCR } from '@/api/market/member'
  import { drivingLicenseFrontOcrApi, drivingLicenseBackOcrApi, inspectionOcrApi } from '@/api/asset/car-manager'
  const props = defineProps({
    // 图片识别类型
    // idCardFront 身份证正面
    // idCardBack 身份证反面
    // driverCardFront 驾驶证正面
    // driverCardBack 驾驶证反面
    // drivingLicenseFront 行驶证正面
    // drivingLicenseBack 行驶证反面
    // inspection 电子年检证
    ocrType: {
      type: String,
      default: 'idCardFront',
    },
    // 文件id
    fileId: {
      type: String,
      default: '',
    },
  })

  const emits = defineEmits(['success'])

  // ocr识别中loading
  const ocrLoading = ref(false)

  /**
   * ocr识别
   * @param fileId 文件id
   */
  const identify = (fileId) => {
    // 识别中，不执行
    if (ocrLoading.value) return false
    let identifyApi = IdCardFrontOCR
    // 识别接口
    const ocrType = props.ocrType
    if (ocrType === 'idCardFront') identifyApi = IdCardFrontOCR
    else if (ocrType === 'idCardBack') identifyApi = IdCardBackOCR
    else if (ocrType === 'driverCardFront') identifyApi = driverCardFrontOCR
    else if (ocrType === 'driverCardBack') identifyApi = driverCardBackOCR
    else if (ocrType === 'drivingLicenseFront') identifyApi = drivingLicenseFrontOcrApi
    else if (ocrType === 'drivingLicenseBack') identifyApi = drivingLicenseBackOcrApi
    else if (ocrType === 'inspection') identifyApi = inspectionOcrApi
    ocrLoading.value = true
    identifyApi({ fileId })
      .then((res) => {
        const result = res.result
        if (ocrType == 'inspection') {
          if (result && result.date) {
            emits('success', result)
          } else {
            // 未识别到 date
            uni.showToast({
              icon: 'none',
              title: '文件识别失败',
            })
          }
        } else {
          emits('success', result)
        }
      })
      .finally(() => {
        ocrLoading.value = false
      })
  }
</script>

<style lang="scss" scoped>
  .ocr-button {
    width: 204rpx;
    height: 54rpx;
    line-height: 54rpx;
    color: #ffffff;
    text-align: center;
    background: #3072f6;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-size: 28rpx;
    margin-top: 16rpx;
    .ocr-loading {
      margin-right: 10rpx;
      border-radius: 50%;
      width: 20rpx;
      height: 20rpx;
      display: inline-block;
      animation: spin 2s linear infinite;
      border: 2rpx solid #fff;
      border-top: 2rpx solid transparent;
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
</style>
